// const idName = window.sessionStorage.getItem('idName')

// console.log(idName)
// getList()
// async function getList() {
//     let info = {
//         itemId: `${idName}`,
//     }
//     console.log(info)
//     const res = await pAjax({ url: '/nine', data: info, dataType: 'json' })
//     console.log(res)

// }





const idName = window.sessionStorage.getItem('idName')
console.log(idName)
const left = document.querySelector('.detail>.contain>.left>.head')
const leftBottom = document.querySelector('.detail>.contain>.left>.bottom>ul')
const right = document.querySelector('.detail>.contain>.right')
const enImg = document.querySelector('.detail>.contain>.enlarge')

getList()
async function getList() {
    let info = {
        itemId: `${idName}`,
    }
    console.log(info)
    const res = await pAjax({ url: '/nine', data: info, dataType: 'json' })
    console.log(res)

    bindBig(res.data.itemInfo.imgContent[0])
    bindSmall(res.data.itemInfo.imgContent)
    bindRight(res.data)
    bindEn(res.data.itemInfo.imgContent[0])
}
//渲染正常图片 
function bindBig(list) {
    let str = ''
    // list.forEach((item, index) => {
    str = `
        <img src="${list}" alt="">
        `
    left.innerHTML = str
    // })
}
// 渲染小图
function bindSmall(list) {
    list.forEach((item) => {
        const str = `
        <li>
        <img src="${item}" data-n="${item}" >
    </li>
    `
        leftBottom.innerHTML += str
    })
}

// 渲染大图
function bindEn(list) {
    let str = ''
    // list.forEach((item, index) => {
    str = `
        <img src="${list}" alt="">
        `
    enImg.innerHTML = str
    // })
}



leftBottom.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        left.firstElementChild.src = e.target.dataset.n
        enImg.firstElementChild.src = e.target.dataset.n
    }
})



function bindRight(list) {
    const str = `
      <p>${list.itemInfo.title}</p>
      <div class="info">
          <p>价格
              <span>￥${list.itemInfo.priceSale}</span>
              <span>￥${list.itemInfo.priceMarket}</span>
          </p>
          <p>领券
           <span>${list.coupons}</span> 
          </p>
          <p>促销
          <span>${!list.promotion.current ?' ': list.promotion.current.tag}</span>
          <span>${!list.promotion.current ?' ': list.promotion.current.tag}</span>
          </p>
      </div>
      <div class="wl">
          <p>${list.notice.msg}</p>
      </div>
      <p>数量 
          <span>-</span>
          <span></span>
          <span>+</span>
      </p>
      <button>立即购买</button>
      <button>加入购物车</button>    
      `
      
      right.innerHTML = str
      const e1 = new Enlarge('#box')
}


// 放大镜
class Enlarge{
    constructor(select) {
        this.ele = document.querySelector(select)
        this.show = this.ele.querySelector('.show')
        this.mask = this.ele.querySelector('.mask')
        this.list = this.ele.querySelector('.list')
        this.enlarge = this.ele.querySelector('.enlarge')
        console.log(this.ele)
        console.log(this.show)
        console.log(this.mask)
        console.log(this.list)
        console.log(this.enlarge.firstElementChild)
        //拿到 show，mask，enlagre 的宽度和高度
        this.show_width = this.show.clientWidth
        this.show_height = this.show.clientHeight
       

        this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
        this.mask_height = parseInt(window.getComputedStyle(this.mask).height)

        this.bg_width = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width)
        this.bg_height = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height)
        this.setScale()
        // this.changeImg()
        this.overOut()
        this.move()
    }

    setScale() {
        this.enlarge_width = this.mask_width * this.bg_width / this.show_width
        this.enlarge_height = this.mask_height * this.bg_height / this.show_height

        this.enlarge.style.width = this.enlarge_width + 'px'
        this.enlarge.style.height = this.enlarge_height + 'px'
    }
    // changeImg() {
    //     this.list.addEventListener('click', e => {
    //         if (e.target.nodeName !== 'IMG') return
    //         for (let i = 0; i < this.list.children.length; i++) {
    //             this.list.children[i].classList.remove('active')
    //         }
    //         e.target.classList.add('active')
    //         const show_url = e.target.dataset.show
    //         const enlarge_url = e.target.dataset.enlarge

    //         this.show.firstElementChild.src = show_url
    //         this.enlarge.firstElementChild.src = enlarge_url
    //     })
    // }
    overOut() {
        this.show.addEventListener('mouseover', () => {
            this.mask.style.display = 'block'
            this.enlarge.style.display = 'block'
        })
        this.show.addEventListener('mouseout', () => {
            this.mask.style.display = 'none'
            this.enlarge.style.display = 'none'
        })
    }
    move() {
        this.show.addEventListener('mousemove', e => {
            let x = e.offsetX - this.mask_width / 2
            let y = e.offsetY - this.mask_height / 2

            if (x <= 0) x = 0
            if (y <= 0) y = 0
            if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
            if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height

            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'

            const bg_x = x * this.enlarge_width / this.mask_width
            const bg_y = y * this.enlarge_height / this.mask_height
            this.enlarge.firstElementChild.style.left = -bg_x + "px"
            this.enlarge.firstElementChild.style.top = -bg_y + "px"

        })
    }
}